var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var map;

var rendererOptions = {

    polylineOptions: {
        strokeColor:'Tomato',
        strokeWeight: 4
    }

}

var styles = [
    {
        "stylers": [
            { "hue": "#00bbff" },
            { "saturation": 98 },
            { "lightness": 6 },
            { "gamma": 0.79 },
            { "visibility": "on" }
        ]
    }
]




function initialize(element) {
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var therap = new google.maps.LatLng(23.79123, 90.40126);
    var mapOptions = {
        zoom:16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: therap
    }
    //map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map = new google.maps.Map(element, mapOptions);

    map.setOptions({styles: styles});
    directionsDisplay.setMap(map);
}

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;

    var waypts = [];
    var checkboxArray = document.getElementById('waypoints').getElementsByTagName("li");

    for (var i = 0; i &lt; checkboxArray.length; i++) {
        waypts.push({
            location:checkboxArray[i].getAttribute("value"),
            stopover:true});
    }

    var request = {
        origin:start,
        destination:end,
        waypoints:waypts,
        provideRouteAlternatives: false,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);